import React, {useEffect, useState} from 'react';
import {useParams} from 'react-router-dom';
import axios from 'axios';
import {Card, Row, Col, message} from 'antd';
import './harpdetails.css';

// 定义新的接口类型来匹配实际返回的数据结构
interface HarpData {
    audio: {
        audio_url: string;
        two: string;
        harp_id: string;
        four: string;
        six: string;
        eight: string;
        one: string;
        id: number;
        thure: string;
        five: string;
        seven: string;
    };
    harp: {
        thure: string;
        id: number;
        five: string | null;
        seven: string | null;
        eight: string | null;
        title: string;
        one: string;
        two: string;
        four: string;
        six: string | null;
        attribute: number;
        attributes: string;
    };
}

const HarpDetails: React.FC = () => {
    const [harpDetail, setHarpDetail] = useState<HarpData | null>(null);
    const {id} = useParams<{ id: string }>();
    const token = localStorage.getItem('token');


    useEffect(() => {
        const fetchHarpDetail = async () => {
            try {
                const response = await axios.get<HarpData>(`/api/harp/harp_audio/${id}`, {
                    headers: {
                        Authorization: `Bearer ${localStorage.getItem('token')}`,
                    },
                });
                setHarpDetail(response.data);
            } catch (err) {
                message.error('获取数据失败，请稍后再试。');
                console.error(err);
            }
        };

        fetchHarpDetail();
    }, [id]);

    if (!harpDetail) return <div>Loading...</div>;

    const handleCardClick = (audioUrl: string) => {
        const audio = new Audio(audioUrl);
        console.log(audioUrl)
        audio.play().catch((error) => {
            message.error('音频播放失败，请稍后再试。');
            console.error(error);
        });
    };

    return (
        <div style={{padding: '20px', textAlign: 'center'}}>
            <Card title={harpDetail.harp.title} className="harpdetails-card">
                <Row gutter={16}>
                    {harpDetail.harp.one && <Col span={24}><Card className="clickable-card"
                                                                 onClick={() => handleCardClick(harpDetail.audio.one)}>{harpDetail.harp.one}</Card></Col>}
                    {harpDetail.harp.two && <Col span={24}><Card className="clickable-card"
                                                                 onClick={() => handleCardClick(harpDetail.audio.two)}>{harpDetail.harp.two}</Card></Col>}
                    {harpDetail.harp.thure && <Col span={24}><Card className="clickable-card"
                                                                   onClick={() => handleCardClick(harpDetail.audio.thure)}>{harpDetail.harp.thure}</Card></Col>}
                    {harpDetail.harp.four && <Col span={24}><Card className="clickable-card"
                                                                  onClick={() => handleCardClick(harpDetail.audio.four)}>{harpDetail.harp.four}</Card></Col>}
                    {harpDetail.harp.five && <Col span={24}><Card className="clickable-card"
                                                                  onClick={() => handleCardClick(harpDetail.audio.five)}>{harpDetail.harp.five}</Card></Col>}
                    {harpDetail.harp.six && <Col span={24}><Card className="clickable-card"
                                                                 onClick={() => handleCardClick(harpDetail.audio.six)}>{harpDetail.harp.six}</Card></Col>}
                    {harpDetail.harp.seven && <Col span={24}><Card className="clickable-card"
                                                                   onClick={() => handleCardClick(harpDetail.audio.seven)}>{harpDetail.harp.seven}</Card></Col>}
                    {harpDetail.harp.eight && <Col span={24}><Card className="clickable-card"
                                                                   onClick={() => handleCardClick(harpDetail.audio.eight)}>{harpDetail.harp.eight}</Card></Col>}
                </Row>
            </Card>
        </div>
    );
};

export default HarpDetails;